<style lang="less">
    @import '../../styles/common.less';
    @import '../../styles/table.less';
</style>

<template>
    <div>
        <Row class="margin-top-10">
            <Col span="24">
                <Card>
                    <p slot="title" style="height:25px;">
                        <Icon type="ios-keypad"></Icon> 订单列表
                    </p>
                    <Row>
                        <Select v-model="type" style="width:200px">
                            <Option value="">请选择类型</Option>
                            <Option :value="1" >商品</Option>
                            <Option :value="2" >预售</Option>
                        </Select>
                        <Select v-model="status" style="width:200px">
                            <Option value="">请选择状态</Option>
                            <Option :value="1" >待付款</Option>
                            <Option :value="2" >关闭订单</Option>
                            <Option :value="3" >已付款</Option>
                            <Option :value="4" >已发货</Option>
                            <Option :value="5" >已收货</Option>
                            <Option :value="6" >已评价</Option>
                            <Option :value="7" >已付尾款</Option>
                        </Select>
                        <Input v-model="keywords" placeholder="请输入关键词..." style="width: 200px" />
                        <Date-picker type="daterange" @on-change="formatDate" placement="bottom-end" placeholder="选择日期" style="width: 200px"></Date-picker>
                        <span @click="getList" style=""><Button type="primary" icon="search">搜索</Button></span>
                        <Button @click="getList" type="ghost" >取消</Button>
                    </Row>
                    <p style="height: 15px;"></p>
                    <div>
                        <div>
                            <Table stripe :columns="columns" :data="rows" border></Table>
                        </div>
                        <div style="margin-top:10px;text-align: center;">
                             <Page :total="total" :page-size="per_page" :current="1" @on-change="changePage" ></Page>
                        </div>
                    </div>
                </Card>
            </Col>
        </Row>
    </div>
</template>

<script>
export default {
    name: 'getList',
    components: {
        // canEditTable //组件名称，需要import
    },
    data () {
        return {
            status: null,
            type: null,
            keywords: '',
            daterange:[],
            rows: [],
            current_page: 1,
            per_page: 20,
            total:0,
            total_page:1,
            columns: [
                {
                    title: 'ID',
                    align: 'center',
                    key: 'order_id',
                    width: 80,
                }, {
                    title: '订单号',
                    align: 'center',
                    key: 'order_sn',
                    width: 150,
                }, {
                    title: '产品名称',
                    align: 'center',
                    key: 'name_list',
                    width: 150,
                }, {
                    title: '总价',
                    align: 'center',
                    key: 'total_pay',
                    width: 150,
                    render: (h, params) => {
                        return params.row.total_pay/100;
                    }
                }, {
                    title: '类型',
                    align: 'center',
                    key: 'type',
                    width: 150,
                    render: (h, params) => {
                        return params.row.type==1?'商品':'预售';
                    }
                }, {
                    title: '关联ID',
                    align: 'center',
                    key: 'relation_id',
                    width: 150,
                }, {
                    title: '状态',
                    align: 'center',
                    key: 'status',
                    width: 150,
                    render: (h, params) => {
                        switch (params.row.status) {
                            case 1 : return '待付款'; break;
                            case 2 : return '关闭订单'; break;
                            case 3 : return '已付款'; break;
                            case 4 : return '已发货'; break;
                            case 5 : return '已收货'; break;
                            case 6 : return '已评价'; break;
                            case 7 : return '已付尾款'; break;
                        }
                    }
                }, {
                    title: '下单时间',
                    align: 'center',
                    key: 'created_at',
                    width: 150,
                },

                {
                    title: '操作',
                    key: 'action',
                    width: 200,
                    align: 'center',
                    render: (h, params) => {
                        return h('div', [
                            h('Button', {
                                props: {type: 'primary', size: 'small'},
                                style: {marginRight: '5px'},
                                on: {
                                    click: () => {
                                        this.edit(params.row.order_id)
                                    }
                                }
                            }, '编辑'),
                            h('Poptip', {
                                props: {confirm: true, title: '您确定要删除这条数据吗?', transfer: true},
                                on: {
                                    'on-ok': () => {
                                        this.remove(params.row.order_id);
                                    }
                                }
                            }, [
                                h('Button', {
                                    props: {type: 'error', size: 'small'}
                                }, '删除')
                            ]),
                        ]);
                    }
                }
            ],
        };
    },
    methods: {
        getList() {
            this.$http.post('admin/order/getList', this.$qs.stringify({
                per_page : this.per_page,
                page : this.current_page,
                type : this.type,
                status : this.status,
                keywords : this.keywords,
                daterange : this.daterange,
            })).then((res) => {
                var d = res.data;
                if (d.code == 0) {
                    this.rows = d.data.rows;
                    this.current_page = d.data.current_page;
                    this.total = d.data.total;
                    this.total_page = d.data.total_page;
                } else {
                    this.$Notice.error({
                        title: 'Error Warning',
                        desc: `Error：${d.msg}<br>`
                    });
                }
            })
        },
        // show (order_id) {
        //     this.$http.post('admin/order/getOne', this.$qs.stringify({order_id : order_id})).then((res) => {
        //         var d = res.data;
        //         if (d.code == 0) {
        //             let cont = '';
        //             let comment = '';
        //             for(let g of d.data.order_goods) {
        //                 cont += '<tr>';
        //                 cont += '<td>'+ g.order_goods_id +'</td>';
        //                 cont += '<td><img src="'+ g.cover_img +'?x-oss-process=image/resize,h_50"></td>';
        //                 cont += '<td>'+ g.goods_name +'</td>';
        //                 cont += '<td>'+ g.price/100 +'</td>';
        //                 cont += '<td>'+ g.num +'</td>';
        //                 cont += '<td>'+ g.total_pay/100 +'</td>';
        //                 cont += '</tr>';
        //             };
        //             if (d.data.order_comment) {
        //                 comment = d.data.order_comment.content;
        //             }
        //             this.$Modal.info({
        //                 width: '500px',
        //                 title: '订单号：' + d.data.order_sn,
        //                 content: `评论：
        //                     <div style="margin:10px;">${comment}</div></br>
        //                     产品：
        //                     <table style="text-align: center;" border="1px" cellspacing="0" cellpadding="0">
        //                     <thead><tr><td>ID</td><td>图片</td><td>名称</td><td>单价</td><td>数量</td><td>总价</td></tr></thead>
        //                     <tbody>${cont}</tbody>
        //                     </table>
        //                     `,
        //             });
        //         } else {
        //             this.$Notice.error({
        //                 title: 'Error Warning',
        //                 desc: `Error：${d.msg}<br>`
        //             });
        //         }
        //     })
        // },
        edit (order_id) {
            this.$router.push({
                name: 'orderPage',
                query: {order_id: order_id}
            });
        },
        remove (order_id) {
            this.$Notice.error({
                title: 'Error Warning',
                desc: `没有权限`
            });
        },
        changePage (current_page) {
            this.current_page = current_page;
            this.getList();
        },
        formatDate (date) {
            this.daterange = date;
        },
    },
    created () {
        this.getList();
    }
};
</script>
